<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios的基本使用</title>
</head>

<body>
    <button onclick="btnGet()">get请求</button>
    <button onclick="btnPost()">post请求</button>
    <button onclick="btnPut()">put请求</button>
    <button onclick="btnDelete()">delete请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        axios.defaults.baseURL = 'http://localhost:3000';

        function btnGet() {
            axios({
                url: '/posts',
                // method: "GET",
                params: {
                    id: 1,
                    xxx: 'abc'
                }
            }).then(
                response => {
                    console.log(response);
                },
                error => {
                    alert(error.message)
                })
        }

        function btnPost() {
            /* axios.post('http://localhost:3000/posts', {
                    "title": "janine 的由来",
                    "author": "janine"
                }) */

            axios({
                url: '/posts',
                method: "POST",
                data: {
                    "title": "json-server---",
                    "author": "typicode---"
                }
            }).then(
                response => {
                    console.log(response);
                },
                error => {
                    alert(error.message)
                })
        }

        function btnPut() {
            axios({
                url: '/posts/3',
                method: "put",
                data: {
                    "title": "json-server+++",
                    "author": "typicode+++"
                }
            }).then(
                response => {
                    console.log(response);
                },
                error => {
                    alert(error.message)
                })
        }

        function btnDelete() {
            axios({
                url: '/posts/3',
                method: "delete"
            }).then(
                response => {
                    console.log(response);
                },
                error => {
                    alert(error.message)
                })
        }
    </script>
</body>

</html>